﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        .main {
            height: 100%;
            overflow: hidden;
        }

        .layui-table-total {
            display: none;
        }

        #pagination-container {
            position: relative;
            width: 100%;
            background-color: white;
            padding: 10px;
            z-index: 100;
            margin-top: 10px; /* 根据需要调整 */
        }

        /* 修改编辑按钮颜色 */
        .layui-btn.layui-btn-xs[lay-event="edit"] {
            background-color: orange;
            color: white;
        }

        /* 修改删除按钮颜色 */
        .layui-btn.layui-btn-xs[lay-event="delete"] {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
    @* 查询条件 *@
    <div class="main">
        <div class="layui-inline">
            <input id="id" type="text" class="layui-input-inline" placeholder="单据编码" />&nbsp;
            <input id="customerName" type="text" class="layui-input-inline" placeholder="客户名称" />&nbsp;
            <button type="button" class="layui-btn layui-bg-blue" id="queryButton">查询</button>
        </div>
        <div style="padding: 16px;">
            <table class="layui-hide" id="test" lay-filter="test" lay-event="GetDataByCha"></table>
        </div>
        <div id="pagination-container"></div>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="showDetails">单据</button>
                <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="addSaleOrder">新增</button>
                <a href="http://localhost:8075/webroot/decision/view/duchamp?viewlet=%25E5%258F%2591%25E8%25B4%25A7%25E5%2592%258C%25E5%25BC%2580%25E7%25A5%25A8%25E9%2580%259A%25E7%259F%25A5.fvs&page_number=1" target="_blank">发货通知明细</a>
                <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
                    <span>{{= d.lineStyle? '多行' : '单行' }}模式</span>
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                </button>
            </div>
        </script>
        <script type="text/html" id="toolDemo">
            <div class="layui-clear-space">
                <a class="layui-btn layui-btn-xs" lay-event="detail">查看明细</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                @* <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a> *@
            </div>
        </script>
    </div>
    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'dropdown', 'layer', 'jquery'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 定义字段值转换的映射对象
            var statusMap = {
                '1': '开立',
                '2': '审核'
            };
            var ywtype = {
                '1': '销售类型',
            };
            var ywstate = {
                '1': '正常',
            };
            // 渲染表格
            table.render({
                elem: '#test',
                //url: 'http://localhost:5234/api/Sales/GetOneDelivery',
                url: "@ViewBag.BaseUrl/T7/Sales/GetOneDelivery",

                request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                where: {
                    documentCode: $("#documentCode").val(),
                    customerName: $("#customerName").val(),
                },
                limit: 15,
                limits: [2, 15, 20],
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips',
                    onClick: function (obj) {
                        layer.alert('自定义工具栏图标按钮');
                    }
                }],
                height: 'full-35',
                css: [
                    '.layui-table-tool-temp{padding-right: 145px;}'
                ].join(''),
                cellMinWidth: 80,
                totalRow: true,
                page: true,
                cols: [[
                    { field: 'documentCode', fixed: 'left', width: 100, title: '单据编码', sort: true },
                    { field: 'documentDate', fixed: 'left', width: 100, title: '单据日期', sort: true },
                    {
                        field: 'documentStatus', width: 100, title: '单据状态', templet: function (d) {
                            return statusMap[d.documentStatus] || d.documentStatus;
                        }
                    },
                    {
                        field: 'businessTypeId', width: 100, title: '业务类型', templet: function (d) {
                            return ywtype[d.businessTypeId] || d.businessTypeId;
                        }
                    },
                    //{ field: 'businessTypeId', title: '业务类型', width: 100, sort: true },
                    { field: 'customerName', title: '销售客户', width: 100 },

                    { field: 'operator', width: 100, title: '销售员', sort: true },
                    {
                        field: 'businessStatusId', width: 100, title: '业务状态', templet: function (d) {
                            return ywstate[d.businessStatusId] || d.businessStatusId;
                        }
                    },
                    //{ field: 'businessStatusId', title: '业务状态', width: 100, sort: true },
                    { field: 'auditDate', title: '审核日期', width: 100, sort: true },
                    { title: '操作', toolbar: '#toolDemo', width: 150 }
                ]],
                done: function () {
                    var id = this.id;
                    // 下拉按钮测试
                    dropdown.render({
                        elem: '#dropdownButton',
                        data: [{
                            id: 'add',
                            title: '添加'
                        }, {
                            id: 'update',
                            title: '编辑'
                        }, {
                            id: 'delete',
                            title: '删除'
                        }],
                        click: function (obj) {
                            var checkStatus = table.checkStatus(id);
                            var data = checkStatus.data;
                            switch (obj.id) {
                                case 'add':
                                    window.location.href = '@Url.Action("AddDelivey", "Sales")';
                                    break;
                                case 'update':
                                    if (data.length != 1) {
                                        return layer.msg('请选择一行');
                                    }
                                    layer.confirm('你确定要修改吗？', function (index) {
                                        window.location.href = '@Url.Action("UptSaleOrder", "SaleOrder")?id=' + encodeURIComponent(data[0].id);
                                    });
                                    break;
                                case 'delete':
                                    if (data.length != 1) {
                                        return layer.msg('请选择一行');
                                    }
                                    layer.confirm('你确定要删除吗？', function (index) {
                                        var roleId = data[0].roleId;
                                        var loadIndex = layer.load(2);
                                        $.ajax({
                                            //url: 'https://localhost:7272/api/Message/DelRole',
                                            url: "@ViewBag.BaseUrl/T6/Message/DelRole",
                                            type: 'post',
                                            contentType: 'application/json',
                                            dataType: 'json',
                                            data: JSON.stringify({ roleId: roleId }),
                                            success: function (res) {
                                                console.log(res);
                                                layer.close(loadIndex);
                                                if (res.code === 204) {
                                                    layer.msg(res.msg, { icon: 1 }, function () {
                                                        layer.close(index);
                                                        table.reload('test');
                                                    });
                                                } else {
                                                    layer.msg(res.msg || '删除失败', { icon: 2 });
                                                }
                                            },
                                            error: function (xhr, status, error) {
                                                layer.close(loadIndex);
                                                layer.msg('请求失败:' + error, { icon: 2 });
                                            }
                                        });
                                    });
                                    break;
                            }
                        }
                    });


                    // 行模式
                    dropdown.render({
                        elem: '#rowMode',
                        data: [{
                            id: 'default-row',
                            title: '单行模式（默认）'
                        }, {
                            id: 'multi-row',
                            title: '多行模式'
                        }],
                        click: function (obj) {
                            var checkStatus = table.checkStatus(id);
                            var data = checkStatus.data;
                            switch (obj.id) {
                                case 'default-row':
                                    table.reload('test', {
                                        lineStyle: null
                                    });
                                    layer.msg('已设为单行');
                                    break;
                                case 'multi-row':
                                    table.reload('test', {
                                        lineStyle: 'height: 95px;'
                                    });
                                    layer.msg('即通过设置 lineStyle 参数可开启多行');
                                    break;
                            }
                        }
                    });
                },
                error: function (res, msg) {
                    console.log(res, msg)
                }
            });
            // 点击查询按钮重新加载表格信息
            $('#queryButton').click(function () {
                table.reload('test', {
                    where: {
                        contract: $("#contract").val(),
                        id: $("#id").val(),
                        customerName: $("#customerName").val(),
                        saleUser: $("#saleUser").val(),
                        saleType: $("#saleType").val(),
                        materialsName: $("#materialsName").val()
                    }
                });
            });
            table.on('row(test)', function (obj) {
                var data = obj.data; // 当前行数据
                if (obj.event.target.cellIndex === 1) { // 判断是否为 id 列（根据列索引）
                    window.location.href = '@Url.Action("UptSaleOrder", "Sales")?id=' + encodeURIComponent(data.id);
                }
            });
            // 工具栏事件
            table.on('toolbar(test)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        var getData = table.getData(id);
                        console.log(getData);
                        layer.alert(layui.util.escape(JSON.stringify(getData)));
                        break;
                    case 'addSaleOrder':
                        window.location.href = '@Url.Action("AddSaleOrder", "SaleOrder")';
                        break;
                    case 'showDetails':
                        // 跳转至 Sales 控制器的 GetDelivery 视图
                        window.location.href = '@Url.Action("GetDelivey", "Sales")';
                        break;
                }
            });
            // 表头自定义元素工具事件 --- 2.8.8+
            table.on('colTool(test)', function (obj) {
                var event = obj.event;
                console.log(obj);
                if (event === 'email-tips') {
                    layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
                        title: '当前列属性选项'
                    });
                }
            });

            // table 滚动时移除内部弹出的元素
            var tableInst = table.getOptions('test');
            tableInst.elem.next().find('.layui-table-main').on('scroll', function () {
                dropdown.close('dropdown-table-tool');
            });

            // 监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    // 将 DocumentCode 存储到本地存储中
                    localStorage.setItem('DocumentCode', data.documentCode);
                    // 跳转到 UpdateDelivery 页面
                    window.location.href = '@Url.Action("UpdateDelivery", "Sales")';
                    alert(data.documentCode)
                } else if (obj.event === 'detail') {
                    // 将 DocumentCode 存储到本地存储中
                    localStorage.setItem('DocumentCodeD', data.documentCode);
                    // 跳转到 GetDetails 页面
                    window.location.href = '@Url.Action("GetDetails", "Sales")';
                    //alert(data.documentCode)
                }
            });
        });
    </script>
</body>

</html>